
/* Timeline */
.callout.callout[data-callout~="timeline"] {
    --callout-icon: 'clock-12';
    // --callout-color: 209, 220, 226;
    --callout-padding: 0;
    --callout-title-padding: 10px;
    --callout-content-padding: 10px;
    --callout-margin: 0;
    --timeline-shadow: var(--outline, var(--background-modifier-box-shadow));
    
    --micro: 50px;
    --tiny: 100px;
    --small: 200px;
    --small-med: 300px;
    --med-small: 400px;
    --medium: 500px;
    --med-tall: 600px;
    --tall: 700px;
    --c-timeline: calc(50% - 2px); // 50% - (border width * 2)

    background-color: transparent;

    margin: 0;
    border: 0;
    clear: both;
    position: unset !important;
    
    & .callout-title {
        background: rgba(var(--callout-color), 0.35);
        align-content: center;
        align-items: center;
        
        & em {
            font-style: normal;
            display: block;
            font-size: 14px;
            line-height: 12px;
            color: rgb(var(--callout-color));
        }
    }
    
    & .callout-icon {
        background-color: var(--note, var(--background-primary));
        transform: scale(1.2);
        border-radius: 20px;
        height: var(--icon-size);
        width: var(--icon-size);
    }

    & .callout-content {
        background-color: rgb(var(--callout-color), 0.1);
    }
    
    //Side Alignment
    &[data-callout-metadata~="t-l"] {
        border-right: 4px solid rgb(var(--callout-color));
        margin-right: var(--c-timeline);
        z-index: 0;

        & > .callout-title,
        & > .callout-content { box-shadow: -4px 4px 0 var(--timeline-shadow); }
    }
    &[data-callout-metadata~="t-r"] {
        border-left: 4px solid rgb(var(--callout-color));
        margin-left: var(--c-timeline);
        
        & > .callout-title,
        & > .callout-content 
        { box-shadow: 4px 4px 0 var(--timeline-shadow); }
    }
    
    //Title/Icon Alignment
    &[data-callout-metadata~="t-l"] > .callout-title {
        flex-direction: row-reverse;
        text-align: right;
    }
    &[data-callout-metadata~="t-l"] > .callout-title .callout-icon {
        float: right;
        position: absolute;
        margin-right: -20px;
    }
    &[data-callout-metadata~="t-r"] > .callout-title .callout-icon {
        float: left;
        position: absolute;
        margin-left: -20px;
    }

    &[data-callout-metadata~="t-1"]  .callout-title {  margin-top: var(--micro); }
    &[data-callout-metadata~="t-2"]  .callout-title {  margin-top: var(--tiny); }
    &[data-callout-metadata~="t-3"]  .callout-title {  margin-top: var(--small); }
    &[data-callout-metadata~="t-4"]  .callout-title {  margin-top: var(--small-med); }
    &[data-callout-metadata~="t-5"]  .callout-title {  margin-top: var(--med-small); }
    &[data-callout-metadata~="t-6"]  .callout-title {  margin-top: var(--medium); }
    &[data-callout-metadata~="t-7"]  .callout-title {  margin-top: 350px; }
    &[data-callout-metadata~="t-8"]  .callout-title {  margin-top: var(--med-tall); }
    &[data-callout-metadata~="t-9"]  .callout-title {  margin-top: var(--tall); }
    &[data-callout-metadata~="t-10"] .callout-title {  margin-top: 750px; }


    // &[data-callout-metadata~="b-1"] {   padding-bottom: var(--micro); }
    // &[data-callout-metadata~="b-2"] {   padding-bottom: var(--tiny); }
    // &[data-callout-metadata~="b-3"] {   padding-bottom: var(--small); }
    // &[data-callout-metadata~="b-4"] {   padding-bottom: var(--small-med); }
    // &[data-callout-metadata~="b-5"] {   padding-bottom: var(--med-small); }
    // &[data-callout-metadata~="b-6"] {   padding-bottom: var(--medium); }
    // &[data-callout-metadata~="b-7"] {   padding-bottom: 350px; }
    // &[data-callout-metadata~="b-8"] {   padding-bottom: var(--med-tall); }
    // &[data-callout-metadata~="b-9"] {   padding-bottom: var(--tall); }
    // &[data-callout-metadata~="b-10"] {  padding-bottom: 750px; }
}